<!--
 * @Author: your name
 * @Date: 2021-12-22 12:10:47
 * @LastEditTime: 2021-12-22 21:24:17
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \briup_am\am-dashboard\src\pages\government\components\Bottom2.vue
-->
<!--
  功能 左侧第一个图形
  作者：lic学分成绩
  邮箱：lic学分成绩@briup.com
  时间：2021年05月5日 20:21:48
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <!--1. 容器 -->
  <div ref="Bottom1_container" style="height: 95%"></div>
</template>
<script>
// 2. 导入图表构造函数
import { Scatter } from '@antv/g2plot';
export default {
  mounted() {
    // 4. 在页面渲染完成后调用图表的渲染
    this.initChart();
  },
  methods: {
    // 3. 初始化图表
    initChart() {
     const data = [
  { 序号: 1, 学分成绩: 4.181 },
  { 序号: 2, 学分成绩: 4.665 },
  { 序号: 3, 学分成绩: 5.296 },
  { 序号: 4, 学分成绩: 5.365 },
  { 序号: 5, 学分成绩: 5.448 },
  { 序号: 6, 学分成绩: 5.744 },
  { 序号: 7, 学分成绩: 5.653 },
  { 序号: 8, 学分成绩: 5.844 },
  { 序号: 9, 学分成绩: 6.362 },
  { 序号: 10, 学分成绩: 6.38 },
  { 序号: 11, 学分成绩: 6.311 },
  { 序号: 12, 学分成绩: 6.457 },
  { 序号: 13, 学分成绩: 6.479 },
  { 序号: 14, 学分成绩: 6.59 },
  { 序号: 15, 学分成绩: 6.74 },
  { 序号: 16, 学分成绩: 6.58 },
  { 序号: 17, 学分成绩: 6.852 },
  { 序号: 18, 学分成绩: 6.531 },
  { 序号: 19, 学分成绩: 6.682 },
  { 序号: 20, 学分成绩: 7.013 },
  { 序号: 21, 学分成绩: 6.82 },
  { 序号: 22, 学分成绩: 6.647 },
  { 序号: 23, 学分成绩: 6.951 },
  { 序号: 24, 学分成绩: 7.121 },
  { 序号: 25, 学分成绩: 7.143 },
  { 序号: 26, 学分成绩: 6.914 },
  { 序号: 27, 学分成绩: 6.941 },
  { 序号: 28, 学分成绩: 7.226 },
  { 序号: 29, 学分成绩: 6.898 },
  { 序号: 30, 学分成绩: 7.392 },
  { 序号: 31, 学分成绩: 6.938 },
];
      const scatterPlot = new Scatter(this.$refs.Bottom1_container, {
        data,
        xField: "序号",
        yField: "学分成绩",
        seriesField: "type",
        isGroup: "true",
        columnStyle: {
          radius: [20, 20, 0, 0],
        },
      });

      scatterPlot.render();
    },
  },
};
</script>
